var ImportMaterialSelect = function () {
  var template = /* html */ `
    <div class="import-material-select" v-loading.fullscreen.lock="loading">
      <search-btn-view append-to-body btn-text="查询物料" @before-open="resetSearch" @search="searchData">
        <template slot="append">
          <el-button size="medium" type="primary" @click="importToShoppingMall">导入到商城</el-button>
        </template>
        <div slot="search-content">
          <sys-common-search request-url="materialSelectFilter/getMaterialSelectData" :request-data="{type:4}" :search="search" 
            :search-field="searchField" label-width="70px" input-width="180px">
            <template slot="append">
              <el-form-item label="默认仓库">
                <el-select v-model="search.defaultWarehouse" style="width:180px">
                  <el-option label="原材料仓" value="原材料仓"></el-option>
                  <el-option label="辅料仓" value="辅料仓"></el-option>
                </el-select>
              </el-form-item>
            </template>
          </sys-common-search>
        </div>
      </search-btn-view>
      <div class="import-material-select-table-div">
        <el-table fit stripe border ref="materialTable" :data="materialList" style="width: 100%" height="parent" @selection-change="selectionChange">
          <el-table-column type="selection" width="40px" fixed="left" align="center"></el-table-column>
          <el-table-column prop="materialName" label="物料名称" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="物料分类" min-width="140px" header-align="center">
            <template slot-scope="scope">
              <el-cascader clearable filterable class="form-input" v-model="scope.row.classifyIds" :options="classifyList" separator="-" 
                size="mini" :props="typeCascaderProps"></el-cascader>
            </template>
          </el-table-column>
          <el-table-column prop="model" label="规格型号" min-width="100px" header-align="center"></el-table-column>
          <el-table-column prop="color" label="编号" min-width="100px" header-align="center"></el-table-column>
          <el-table-column prop="colorDescription" label="描述" min-width="100px" header-align="center"></el-table-column>
          <el-table-column prop="material" label="材质" min-width="100px" header-align="center"></el-table-column>
          <el-table-column prop="providerNo" label="我司编号" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="providerName" label="供应商" min-width="100px" header-align="center"></el-table-column>
          <el-table-column prop="unit" label="单位" min-width="60px" align="center"></el-table-column>
          <el-table-column prop="unitPrice" label="单价" min-width="80px" align="center"></el-table-column>
          <el-table-column prop="isSynchronization" label="是否与库存同步" min-width="110px" header-align="center">
            <template slot-scope="scope">
              <el-select class="form-input" v-model="scope.row.isSynchronization" size="mini">
                <el-option v-for="synchronizationType in synchronizationTypeList" :key="synchronizationType.value" :value="synchronizationType.value"
                  :label="synchronizationType.label"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="count" label="库存数量" min-width="100px" header-align="center">
            <template slot-scope="scope">
              <el-input-number v-if="scope.row.isSynchronization!==1" is-decimal-zero class="form-input" v-model="scope.row.count" :controls="false" 
                :min="1/Math.pow(10,scope.row.countPrecision)" :precision="scope.row.countPrecision" size="mini"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column prop="defaultWarehouse" label="默认仓库" min-width="100px" header-align="center"></el-table-column>
        </el-table>
      </div>
      <div style="margin-top:10px;text-align:right;" v-if="pagination.totalCount!==0">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange"></el-pagination>
      </div>
    </div>
  `;

  return {
    props: {
      dropdownOption: {
        type: Object,
        required: true
      }
    },

    data: function () {
      var search = {
        materialName: '',
        model: '',
        color: '',
        providerName: '',
        colorDescription: '',
        defaultWarehouse: ''
      };

      var classifyList = this.dropdownOption.classifyData.treeData;
      return {
        loading: false,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        materialList: [],
        classifyList: classifyList,
        searchField: ['materialName', 'model', 'color', 'colorDescription', 'providerName'],
        selectMaterialList: [],
        synchronizationTypeList: i18n.getDropDown('shoppingMallMaterial.synchronizationType', [1, 2]),
        typeCascaderProps: {
          value: 'id',
          label: 'name',
          checkStrictly: true
        },
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 10
        }
      };
    },

    created: function () {
      this.setMaterialList(true);
    },

    methods: {
      setMaterialList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize,
          view: 1
        };

        var search = this.search;
        var fields = ['materialName', 'model', 'color', 'colorDescription', 'providerName', 'defaultWarehouse'];
        SysUtil.setPostData(postData, search, fields);

        this.loading = true;
        var self = this;
        return ajaxRequest("shoppingMall/getCanImportShoppingCallMaterial", postData).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var materialList = res.returnData;
          materialList = _.map(materialList, function (material) {
            material = new MaterialModel(material);
            var unit = material.unit;
            material.countPrecision = SysUtil.getMaterialNumberPrecision(unit, 4);
            return material;
          });

          self.materialList = materialList;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
          return materialList;
        }).catch(function () {
          self.loading = false;
          return null;
        });
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setMaterialList(true);
      },

      pageChange: function () {
        this.setMaterialList();
      },

      selectionChange: function (selectMaterialList) {
        this.selectMaterialList = selectMaterialList;
      },

      importToShoppingMall: function () {
        var selectMaterialList = this.selectMaterialList;
        if (selectMaterialList.length === 0) {
          this.$alert('请选择需要导入到商城的物料', '信息');
          return;
        }
        this.openDialog = true;

        var materialList = _.map(selectMaterialList, function (material) {
          material = material.getObject('import');
          return material;
        });

        this.loading = true;
        var self = this;
        ajaxRequest('shoppingMall/addShoppingCallMaterialBySelected', {
          materialArray: JSON.stringify(materialList)
        }).then(function () {
          self.loading = false;
          self.$alert('物料成功导入到商城', '信息', {
            callback: function () {
              self.$refs['materialTable'].clearSelection();
              self.$emit('import-material-success');
            }
          });

          self.setMaterialList().then(function () {
            if (self.materialList.length === 0 && self.pagination.currentPage !== 1) {
              self.setMaterialList();
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SysCommonSearch: SysCommonSearch
    },

    template: template
  };
}();
